<template>
    <div>
        <div>test</div>
        <div>test</div>
    </div>
</template>
<script>
import { getCurrentInstance } from 'vue';
window['a'] = new WeakMap();
const insta = getCurrentInstance();
// 获取原始组件实例
const rawInstance = insta.proxy;
window['a'].set(rawInstance, 'abc');

export default {
    name: 'Home',
    data() {
        return {
            message: '',
            reconnectTimer: null //断开 重连倒计时
        };
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            return this.message.replace(/\n/gi, '<br />');
        }
    },
    created() {
        this.connect();
    },
    methods: {
        // ws连接
        connect() {
            this.ws = new WebSocket('ws:127.0.0.1:9080');
            // 监听连接开启,
            this.ws.addEventListener('open', () => {
                //开启心跳
                this.startHeart();
            });
            this.ws.addEventListener('message', (e) => {
                // 收到服务器信息，心跳重置,上报
                console.log('message', e.data);
                this.startHeart();
            });
            this.ws.addEventListener('error', (e) => {
                //重连
                console.log('error', e);
                this.reconnect();
            });
            this.ws.addEventListener('close', (e) => {
                //重连
                console.log('close', e);
                this.reconnect();
            });
        },
        //重置心跳
        reset() {
            clearTimeout(this.serverTimeoutObj);
            clearTimeout(this.startHeartTimer);
        }
    }
};
</script>
<style lang="less">
div {
    font-size: 33px;
}
</style>
